﻿@page "/tests/carousel"
<Row>
    <Column ColumnSize="ColumnSize.IsFull">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Carousel</CardTitle>
            </CardHeader>
            <CardBody>
                <Fields>
                    <Field ColumnSize="ColumnSize.Is3">
                        <Switch TValue="bool" @bind-Checked="@showIndicators">Indicators</Switch>
                    </Field>
                    <Field ColumnSize="ColumnSize.Is3">
                        <Switch TValue="bool" @bind-Checked="@showControls">Controls</Switch>
                    </Field>
                </Fields>
            </CardBody>
            <CardBody>
                <Carousel @bind-SelectedSlide="@selectedSlide" ShowIndicators="@showIndicators" ShowControls="@showControls">
                    <CarouselSlide Name="1">
                        <Image Source="assets/images/slides/430-1230x500.jpg" Text="City Skyline" Display="Display.Block" Width="Width.Is100" />
                    </CarouselSlide>
                    <CarouselSlide Name="2">
                        <Image Source="assets/images/slides/431-1230x500.jpg" Text="Coffee" Display="Display.Block" Width="Width.Is100" />
                    </CarouselSlide>
                    <CarouselSlide Name="3">
                        <Image Source="assets/images/slides/432-1230x500.jpg" Text="Mountain" Display="Display.Block" Width="Width.Is100" />
                    </CarouselSlide>
                    <CarouselSlide Name="4">
                        <Image Source="assets/images/slides/433-1230x500.jpg" Text="Bear" Display="Display.Block" Width="Width.Is100" />
                    </CarouselSlide>
                    <CarouselSlide Name="5">
                        <Image Source="assets/images/slides/434-1230x500.jpg" Text="Lake" Display="Display.Block" Width="Width.Is100" />
                    </CarouselSlide>
                    <CarouselSlide Name="6">
                        <Image Source="assets/images/slides/435-1230x500.jpg" Text="Camera" Display="Display.Block" Width="Width.Is100" />
                    </CarouselSlide>
                </Carousel>
            </CardBody>
        </Card>
    </Column>
</Row>
@code{
    private string selectedSlide = "2";
    bool showIndicators = true;
    bool showControls = true;
}